<template>

    <div id="app">
        <div class="title">
            <t-select-input :value="selectValue" :popup-visible="popupVisible" style="width: 300px"
                placeholder="选择标签进行展示" clearable allow-input @popup-visible-change="onPopupVisibleChange"
                @clear="onClear" @input-change="onInputChange">
                <template #panel>
                    <ul class="tdesign-demo__select-input-ul-single">
                        <li v-for="(item, i) in filterFenlei" :key="i" @click="() => onOptionClick(item)">
                            {{ item }}
                        </li>
                    </ul>
                </template>
                <template #suffixIcon>
                    <chevron-down-icon />
                </template>
            </t-select-input>
            <t-button variant="outline" theme="danger" ghost @click="paixu = 1">正序</t-button>
            <t-button variant="outline" theme="warning" @click="paixu = 2" ghost>倒序</t-button>
        </div>

        <t-loading :loading="loading" size="medium" show-overlay>
            <t-base-table stripe bordered hover row-key="id" :data="filterFood" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: food.length }">
                <template #shopimg="{ col, row }">
                    <img style="border-radius:5px;" width="100" height="100" :src="row.icon" alt="">
                </template>
                <template #btns="{ col, row }">
                    <t-button @click="goToStoreDetail(row.shopid)">去修改商品</t-button>
                </template>
            </t-base-table>
        </t-loading>
    </div>
</template>

<script setup>
import { getFoodData } from '@/http/modules/store'
import { ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core';
import { useRouter } from 'vue-router';

const router = useRouter();
const food = ref([]);
const loading = ref(true)
const filterFenlei = computed(() => {
    return Array.from(new Set(food.value.map(n => {
        return n.fenlei
    })))
})

const paixu = ref(0);

const filterFood = computed(() => {
    let fk_food = food.value;
    switch (paixu.value) {
        case 1:
            fk_food = fk_food.sort((a, b) => {
                return new Date(a._createTime).getTime() - new Date(b._createTime).getTime()
            })
            break;
        case 2:
            fk_food = fk_food.sort((a, b) => {
                return new Date(b._createTime).getTime() - new Date(a._createTime).getTime()
            })
            break;
    }
    return fk_food.filter(n => {
        if (!selectValue.value) return true
        return n.fenlei == selectValue.value
    })
})

// const selectValue = ref('tdesign-vue');
const selectValue = ref('');
// const selectValue = ref([{ label: 'tdesign-vue', value: 1 }]);
const popupVisible = ref(false);
const onOptionClick = (item) => {
    selectValue.value = item;
    // 选中后立即关闭浮层
    popupVisible.value = false;
};
const onClear = () => {
    selectValue.value = undefined;
};
const onPopupVisibleChange = (val, context) => {
    console.log(context);
    popupVisible.value = val;
};
const onInputChange = (val, context) => {
    // 过滤功能
    console.log(val, context);
};

const columns = [
    {
        width: '100',
        colKey: 'shopid',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'name',
        title: '商品名字',
    },
    {
        colKey: 'icon',
        title: '图片',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'shopimg',
    },
    {
        colKey: 'price',
        title: '价格',
    },
    {
        colKey: "fenlei",
        title: "分类"
    },
    {
        colKey: "fenlei",
        title: "操作",
        cell: 'btns'
    }
];

// 2.查看商店详细信息功能
const goToStoreDetail = (id) => {
    router.push({
        path: '/shore/shoreDetail',
        query: {
            id
        }
    })
}


getFoodData().then(res => {
    food.value = res;
    loading.value = false
})
</script>
 
<style lang="less" scoped>
.title {
    display: flex;
    margin-bottom: 15px;

    button {
        margin-left: 10px;
    }
}
</style>